<template>
	<view class="app">
		<u-navbar placeholder="true" title="活动详情" :titleStyle="background" :autoBack="true"></u-navbar>
		<view class="timg">
			<!-- <image class="timg-a" src="http://ydxcx.dianteng.cc/static/uploads/picture/20221102/ff9e02e568b643b9a219d7532c4e7139.png"> -->
			<image class="timg-a" :src="detailData.imgurl">
				
			</image>
		</view>
		<!-- <view class="hdsj center">活动时间:{{detailData.sta_time}}~{{detailData.end_time}}</view>
		<view class="hddt center">重庆市</view> -->

		<view class="title">
			<view class="title-a">{{detailData.title}}</view>
			<view class="title-b center space-between">
				<view>
					男嘉宾 已报名{{detailData.male_guest_yet}}人
					<text class="title-c">（可报{{detailData.male_guest}}人）</text>
				</view>
				<view class="row">
					<view class="title-d">￥</view>
					<view class="title-e">{{detailData.man_money}}</view>
				</view>
			</view>

			<view class="title-b center space-between" style="margin-top: 0;background: #FEE9E9;">
				<view style="color: #F23B51;">
					女嘉宾 已报名{{detailData.female_guest_yet}}人
					<text class="title-c">（可报{{detailData.female_guest}}人）</text>
				</view>
				<view class="row"><view class="title-e">免费</view></view>
			</view>
		</view>

		<view class="timg-f center space-between">
			<view class="timg-f-a row center">
				<view style="z-index: 100;">
					<image class="timg-f-b" src="http://ydxcx.dianteng.cc/static/uploads/picture/20221102/ff9e02e568b643b9a219d7532c4e7139.png"></image>
				</view>
				<view style="margin-left: -30rpx;" class="timg-f-c center">万*微已报名</view>
			</view>
			<view class="timg-f-d">{{detailData.ybnum}}人已报名</view>
		</view>
		<view class="x-a"></view>

		<view>
			<view class="row" style="align-items: center;">
				<view class="x-b"></view>
				<view class="hdsjj">活动时间</view>
			</view>
			<view class="hdsj-info">{{detailData.sta_time}}~{{detailData.end_time}}</view>
		</view>

		<view style="margin-top: 30rpx;">
			<view class="row" style="align-items: center;">
				<view class="x-b"></view>
				<view class="hdsjj">活动地点</view>
			</view>
			<view class="hdsj-info">{{detailData.province}}{{detailData.city}}{{detailData.area}}{{detailData.addr}}</view>
		</view>

		<view class="hdxqq center">————活动详情————</view>
		
		<view style="padding: 30rpx;">
			<u-parse :content="content"></u-parse>
			<!-- {{detailData.content}} -->
<!-- 			<view class="timg">
				<image class="timg-a" src="http://ydxcx.dianteng.cc/static/uploads/picture/20221102/ff9e02e568b643b9a219d7532c4e7139.png">
				</image>
			</view>
			<view class="hdxq-info">
				白色情人节到啦 单身朋友们 同学同事中没一个合适的 平时自己的社交圈子又很小 单身的你在为找不到 “火花”另一半而愁眉不展吗? 那不如来参加这次 2022年10月11日-12日
				白色情人节线上相亲会
			</view>
			<view class="timg"><image class="timg-a" src="http://ydxcx.dianteng.cc/static/uploads/picture/20221102/ff9e02e568b643b9a219d7532c4e7139.png"></image></view>
			
			<view style="margin-top: 30rpx;">
				<view class="row" style="align-items: center;"><view class="hdsjj">报名须知</view></view>
				<view class="hdsj-info">必须单身人士，参加者须到法定婚龄(已婚人士禁止参加活动， 否则将担法律责任)</view>
			</view>
			
			<view style="margin-top: 30rpx;">
				<view class="row" style="align-items: center;"><view class="hdsjj">报名条件</view></view>
				<view class="hdsj-info">性别:不限.年龄: 20- -45.婚姻:不限</view>
			</view> -->
		</view>


		<view class="x-a"></view>

		<view class="list-container-ee" style="margin-bottom: 60rpx;">
			<swiper-xq name="活动推荐" :courseData="activityList" :params="{ type: 1  }"></swiper-xq>
			<!-- <swiper-xq name="活动推荐" word="b" :courseData="hotCourseList" :params="{ sort: 'hot' }"></swiper-xq> -->
		</view>
		<view class="ttta"></view>
		<view class="bot row">
			<view class="column  bot-a">
				<u-icon name="chat" color="#000000" size="28"></u-icon>
				<!-- <view class="zxhl">咨询红娘</view> -->
				<u-button  customStyle="background:#f7f7f7;width: 130rpx;borderColor: #f7f7f7;height: 40rpx;fontSize: 30rpx;"  open-type="contact" >咨询</u-button>
			</view>

			<view class="column  bot-a" @click="tabBarUrl()">
				<u-icon name="home" color="#000000" size="28"></u-icon>
				<view class="zxhl">首页</view>
			</view>

			<view class="ljbm center" @click="bmht">立即报名</view>
		</view>
	</view>
</template>

<script>
import api_activity from '@/api/activity.js';
import swiperXq from './components/swiper-xq.vue';

export default {
	components: {swiperXq},
	data() {
		return {
			id:'',//活动id
			pr:'',//1用户 2红娘
			openid:'',
			userInfo:'',
			activityList: [],//活动列表
			content:'',
			background: {
				color: '#000000',
				fontFamily: 'Microsoft YaHei',
				fontWeight: 'bold'
			},
			detailData: {}, // 详情数据
			
		};
	},

	onLoad(option) {
		
		this.id = option.id;
		this.openid = uni.getStorageSync('openid');
		this.userInfo = uni.getStorageSync('userInfo');
		console.log('userInfo',this.userInfo);
		this.pr = this.userInfo.pr
		
		this.getActivityInfo();
		// 相新活动
		this.getactivityList();
	},

	methods: {
		tabBarUrl() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		// 查询活动详情
		async getActivityInfo() {
			const { data } = await api_activity.getActivityInfo({ id: this.id });
			this.detailData = data;
			this.detailData.ybnum = Number(data.male_guest)+Number(data.female_guest);
			this.content = data.content
		},
		// 查询活动列表
		async getactivityList() {
			const  res  = await  api_activity.getactivityList({page:1,limit:10});
			console.log('getactivityList',res.data.data)
			this.activityList = res.data.data
		},
		
		//报名活动
		async bmht(){
			var per = {
				pr:this.pr,
				aid:this.id,
			}
			const  res  = await  api_activity.applyActivity(per);
				
			if(res.code==200){
				this.$util.msg(res.message);
			}else{
				this.$util.msg(res.message);
			}
		}
		
		
	}
};
</script>

<style scoped lang="scss">
.timg {
	position: relative;
}
.timg-a {
	width: 750rpx;
	height: 420rpx;
}
.hdsj {
	position: absolute;
	top: 360rpx;
	left: 50rpx;
	width: 440rpx;
	height: 38rpx;
	background: #f23b51;
	border-radius: 20px;

	font-size: 22rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #ffffff;
	// color: yellow;
}

.hddt {
	position: absolute;
	top: 360rpx;
	right: 50rpx;
	width: 116rpx;
	height: 38rpx;
	background: #000000;
	border-radius: 20rpx;

	font-size: 22rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #ffffff;
	// color: yellow;
}

.title {
	padding: 30rpx;
	font-size: 32rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #333333;
}
.title-a {
	font-size: 32rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #333333;
}

.title-b {
	margin-top: 20rpx;
	padding: 30rpx;
	width: 690rpx;
	height: 64rpx;
	background: #dee8ff;
	border-radius: 1rpx;

	font-size: 24rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #3c7aff;
}

.title-c {
	color: #aeaeae;
}
.title-d {
	color: #333333;
}

.title-e {
	color: #f23b51;
}
.timg-f {
	padding: 0rpx 30rpx;
}
.timg-f-b {
	width: 66rpx;
	height: 66rpx;
	border-radius: 33px;
}
.timg-f-c {
	text-align: center;
	width: 130px;
	height: 25px;
	background: #f7f7f7;
	border-radius: 24px;

	font-size: 24rpx;
	font-family: PingFang;
	font-weight: 500;
	color: #7e7e7e;
}
.timg-f-d {
	font-size: 24rpx;
	font-family: PingFang;
	font-weight: 500;
	color: #7e7e7e;
}

.x-a {
	margin: 20rpx 0;
	width: 750rpx;
	height: 18rpx;
	background: #f5f5f5;
}

.x-b {
	margin-left: 30rpx;
	width: 4rpx;
	height: 26rpx;
	background: #f13a50;
}
.hdsjj {
	margin-left: 30rpx;
	font-size: 28rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #333333;
}

.hdsj-info {
	margin-top: 10rpx;
	margin-left: 30rpx;
	font-size: 24rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #999999;
}

.hdxqq {
	margin-top: 30rpx;
	width: 750rpx;
	height: 91rpx;
	background: #f4f4f4;

	font-size: 26rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #a3a3a3;
}

.hdxq-info {
	padding: 20rpx;
	font-size: 24rpx;
	font-family: PingFang;
	font-weight: 500;
	color: #8e8e8e;
}

.list-container-ee {
	padding: 0 30rpx;
}

.bot {
	padding-top: 10rpx;
	position: fixed;
	bottom: 0;
	width: 750rpx;
	height: 110rpx;
	background: #f7f7f7;
	box-shadow: 0px 0px 4rpx 0px rgba(0, 0, 0, 0.08);
}
.bot-a {
	margin-left: 50rpx;
	width: 120rpx;
	display: flex;
	align-items: center;
}
.zxhl {
	white-space: nowrap;
}
.ljbm {
	margin-top: 10rpx;
	width: 412rpx;
	height: 88rpx;
	background: #f34f4f;
	border-radius: 44rpx;

	font-size: 32rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #ffffff;
}

.ttta {
	height: 100rpx;
	width: 750rpx;
	background: red;
}
</style>
